<template>
  <el-dialog
    v-model="model"
    class="dept-people-select-main dept-people-select-overflow"
    @close="closedDialog"
  >
  <DeptPeopleSelect ref="childUserRef" :userListArr="props.userFilterList" :user-id="props.userFilterId"></DeptPeopleSelect>
  <template #footer>
        <div class="dialog-footer">
          <el-button @click="closedDialog">{{ $t("common.cancel") }}</el-button>
          <el-button type="primary" @click="submitForm">
            {{ $t("common.confirm") }}
          </el-button>
        </div>
      </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { type PropType, ref } from "vue";
import type { UserModel } from "@/api/system/user/types";
const model = defineModel<boolean>();
const childUserRef = ref();
const userListArr = ref<Map<string, UserModel>>(
  new Map<string, UserModel>()
);

const props = defineProps({
  userFilterList: {
    type: Map as PropType<Map<string, UserModel>>,
    default: () => [],
  },
  userFilterId: {
    type: Array,
    default: () => [],
  }
});

console.log(props.userFilterId)

const emit = defineEmits(["updateDeptPeoples"]);
// 关闭弹框
function closedDialog() {
  if (model.value) {
    model.value = false;
  }
}

function submitForm() {
  console.log(childUserRef.value.dynamicTags);
  userListArr.value = new Map<string, UserModel>(childUserRef.value.dynamicTags);
  console.log(Array.from(userListArr.value));
  emit("updateDeptPeoples", userListArr.value);
  closedDialog();
}
</script>

